<template>
  <div>
    <el-row :gutter="20" type="flex" justify="space-around">
      <el-col>
        <Transfer
          ref="originRef"
          :data.sync="originTable"
          :buttonMap="buttonList"
          @confirm="handleConfirm"
          :filterMethod="filterMethod"
        />
      </el-col>
      <el-col>
        <Transfer
          ref="mustRef"
          :data.sync="mustTable"
          :buttonMap="buttonList"
          checkAllTitle="列表1"
          buttonType="must"
          @confirm="handleConfirm"
        />
      </el-col>
      <el-col>
        <Transfer
          ref="chooseRef"
          :data.sync="chooseTable"
          :buttonMap="buttonList"
          checkAllTitle="列表2"
          buttonType="choose"
          @confirm="handleConfirm"
        />
      </el-col>
      <el-col>
        <Transfer
          ref="replaceRef"
          :data.sync="replaceTable"
          :buttonMap="buttonList"
          checkAllTitle="列表3"
          buttonType="replace"
          @confirm="handleConfirm"
        />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Transfer from "@/components/Transfer";
import { buttonMap } from "./config.js";
export default {
  components: {
    Transfer,
  },
  props: {
    openType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      originTable: [
        {
          label_name: "备选1",
        },
        {
          label_name: "备选2",
        },
        {
          label_name: "备选3",
        },
        {
          label_name: "备选4",
        },
        {
          label_name: "备选5",
        },
        {
          label_name: "备选6",
        },
        {
          label_name: "备选7",
        },
        {
          label_name: "备选8",
        },
      ],
      mustTable: [],
      chooseTable: [],
      replaceTable: [],
      buttonList: buttonMap,
      //buttonList:buttonMap,
      filterMethod(query, item) {
        return item.label_name.includes(query);
      },
    };
  },
  methods: {
    /**
     * 按钮点击
     */
    handleConfirm({ key, data }) {
      switch (key) {
        case "origin":
          this.originTable = [...this.originTable, ...data];
          break;
        case "must":
          this.mustTable = [...this.mustTable, ...data];
          break;
        case "choose":
          this.chooseTable = [...this.chooseTable, ...data];
          break;
        case "replace":
          this.replaceTable = [...this.replaceTable, ...data];
          break;
      }
    },
  },
};
</script>
<style scoped></style>
